<template>
  <div class="mySalary">
  
    <v-header :userName="userName"></v-header>
   
    <section class='section' v-if='type==1'>
        <template > 

            <h1 class="main_title">{{people || userName}}的工资</h1>


            <div class="main_content">
        
                  <div class="main_guide">
            
                    <el-select v-model="selecteValue" placeholder="请选择" @change="handleSelect">
            
                      <el-option v-if='options' v-for="(item,index) in options" :key="index" :label="item.value" :value="item.value">
            
                      </el-option>
            
                    </el-select>
            
                    <div class="guide_right" @click.stop='type=2'>(按多月份或年度查询)</div>
                    
                  </div>            
            
            			<template v-if="!isNoData">
											<div v-for='(unit,i) in holeTotalList'>
				                  <div  class="main_info c1" v-for='(k,i) in unit.salarys'>
				            
				                    <div class="info_head">
				            
				                      <div class="info_head_items times">
				            
				                        <span class="dates">{{k.summary.cal_PRD_ID}}</span>
				            
				                        <span class="currencyCode">货币代码：{{returnCurrency(k.summary)}}</span>
				            
				                      </div>
				            
				                      <div class="info_head_items should">
				            
				                        <span class="txt">应发工资：</span>
				            
				                        <!-- <span class="types">{{getCurrency()}}</span> -->
				            
				                        <span class="moneys">{{k.summary.c_GROSS_AMT | keepTwoNum }}</span>
				            
				                      </div>
				            
				                      <div class="info_head_items actual">
				            
				                        <span class="txt">实发工资：</span>
				            
				                        <!-- <span class="types">{{getCurrency()}}</span> -->
				            
				                        <span class="moneys">{{k.summary.c_NET_PAY | keepTwoNum }}</span>
				            
				                      </div>
				            
				                    </div>
				            
				                    <div class="info_ctn info_ctn1">
				            
				                      <section class="per-Month">
				            
				            
				            
				                        <div>
				            
				                          <div class="top">
				            
				                            <span class="items_name">收入合计</span>
				            
				                            <span class="items-line"></span>
				            
				                            <span class="items_money">
				                              {{k.summary.c_GROSS_AMT | keepTwoNum }}
				                            </span>
				                            
				                            
				                          </div>
				            
				                          <ul class="total_income_list">
				          
				                            <li class="total_income_items" v-for='(m,i) in k.income'>
				            
				                              <div class="total_tittle">{{m.name }}：</div>
				            
				                              <div class="total_num">
				                                {{m.value | keepTwoNum }}
				                                <el-tooltip
				                                   v-if='showTool(m.comment)'
				                                    :content='m.comment'
				                                    effect="light"
				                                   placement="top-start" 
				                                   popper-class='mySalary-tooltip'
				                                  >
				                                  <span class='help'>?</span>
				                                  
				                                </el-tooltip>
				                              </div>
				                            </li>
				            
				                          </ul>
				            
					                        <div>
					            
					                          <div class='top'>
					            
					                            <span class="items_name">公司承担社保/MPF</span>
					            
					                            <span class="items-line"></span>
					            
					                            <span class="items_money">{{k.summary.c_MPF }}</span>
					            
					                          </div>
					            
					                          <ul class="total_income_list">
	
						            								<template v-for='c in k.fund'>
								                            <li class="total_income_items"  v-if='c.name && c.name.indexOf("个人")<1'>
								            
								                              <div class="total_tittle">{{c.name}}：</div>
								            
								                              <div class="total_num" >
								                                {{c.value | keepTwoNum }}
								                                <el-tooltip
								                                v-if='showTool(c.comment)'
								                                    :content='c.comment'
								                                    effect="light"
								                                   placement="top-start"  
								                                  >
								                                  <span class='help'>?</span>
								                                </el-tooltip>
								                              </div>
								            
								                            </li>				            									
						            								</template>
																					
							
	
					            								<template v-for='(d,i) in k.mpf'>
					            									
								                            <li class="total_income_items" v-if='d.name && d.name.indexOf("个人")<1'>
								            
								                              <div class="total_tittle">{{d.name}}：</div>
								            
								                              <div class="total_num">
								                                {{d.value | keepTwoNum }}
								                                <el-tooltip
								                                v-if='showTool(d.comment)'
								                                    :content='d.comment'
								                                    effect="light"
								                                   placement="top-start"  
								                                  >
								                                  <span class='help'>?</span>
								                                </el-tooltip>
								                              </div>
								            
								                            </li>				            									
					            									
					            								</template>
	
					            
					                          </ul>
					            
					                        </div>				            
					            				            
				            
				                        </div>
				            
				            
				            
				                        <div>
				            
					                          <div class="top">
					            
					                            <span class="items_name">扣减合计</span>
					            
					                            <span class="items-line"></span>
					            
					                            <span class="items_money">{{k.summary.c_DDCT_AMT | keepTwoNum }}
					                              
					                            </span>
					            
					                          </div>
					            
					                          <ul class="total_income_list">
					            
					                            <li class="total_income_items" v-for='(b,i) in k.deduction'>
					            
					                              <div class="total_tittle">{{b.name}}：</div>
					            
					                              <div class="total_num">
					                                {{b.value | keepTwoNum }}
					                                <el-tooltip
					                                   v-if='showTool(b.comment)'
					                                    :content='b.comment'
					                                    effect="light"
					                                   placement="top-start"  
					                                  >
					                                  <span class='help'>?</span>
					                                </el-tooltip>
					                              </div>
					            
					                            </li>
					            
					                          </ul>
					            
					            
						            											            
						                        <div class="explain" v-if='k.tax[0]'>
						            
						                          <ul class="explain_list">
						            
						                            <li class="explain_items">
						            
						                              <div class="items_val">应纳税收入：</div>
						            
						                              <div class="items_num">{{k.tax[0].tax.C_AMT008 | keepTwoNum}}</div>
						            
						                            </li>
						            
						                            <li class="explain_items">
						            
						                              <div class="items_val">免税额：</div>
						            
						                              <div class="items_num">{{k.tax[0].tax.C_AMT005 | keepTwoNum}}</div>
						            
						                            </li>
						            
						                            <li class="explain_items">
						            
						                              <div class="items_val">捐赠税：</div>
						            
						                              <div class="items_num">{{k.tax[0].tax.C_AMT002 | keepTwoNum }}</div>
						            
						                            </li>
						            
						                            <li class="explain_items">
						            
						                              <div class="items_val">税率：</div>
						            
						                              <div class="items_num">{{k.tax[0].tax.C_AMT007 || 0}}</div>
						            
						                            </li>
						            
						                            <li class="explain_items">
						            
						                              <div class="items_val">速算扣除法：</div>
						            
						                              <div class="items_num">{{k.tax[0].tax.C_AMT006 | keepTwoNum}}</div>
						            
						                            </li>
						            
						                            <li class="explain_items">
						            
						                              <div class="items_val">个人所得税：</div>
						            
						                              <div class="items_num">{{k.tax[0].tax.C_AMT004 | keepTwoNum }}</div>
						            
						                            </li>
						            
						                          </ul>
						            
						                          <div class="triangle_up" :class='getClass(k)'></div>
						                         
						            
						                        </div>
						            
						    			            
					         
					                          <div class="top">
					            
					                            <span class="items_name">人工成本合计</span>
					            
					                            <span class="items-line"></span>
					            
					                            <span class="items_money">{{k.summary.c_LABORCOST | keepTwoNum }}</span>
					            
					                          </div>
			            
				            
					            
					            
					                        <div>
					            				            
	
					                        </div>
				            

				            
				                        </div>
				                        
				                        

				            				            
				                      </section>
				            
				                    
				                    </div>
				            
				                  </div>
									                    							
		            															
														
											</div>

            			
            			</template>

					        <div v-else>
					            <div class="imgBox"><img src="/static/images/nodata.svg" alt=""></div>
					            <p class="data">暂无数据</p>
					        </div>        
            </div>
        </template> 
  
    </section>
  















    <section class='section' v-if='type==2'>
  
  
  
      <h1 class="main_title">{{people || userName}}的工资</h1>
  
  
  
      <div class="main_content">
  
        <div class="main_guide">
  
          <div class="guide_left" @click.stop='type=1'>(按当前月查询)</div>
  
          <div class="block guide_right">
  
  
  
            <el-date-picker v-model="startDate" type="month" placeholder="开始日期" format='yyyy-MM' value-format='yyyy-MM' @change='handleStartDate' :picker-options="pickerOptions">
  
  
  
            </el-date-picker>
  
            <span class="demonstration">-</span>
  
            <el-date-picker v-model="endDate" align="right" type="month" placeholder="结束日期" format='yyyy-MM' value-format='yyyy-MM' :picker-options="pickerOptions" @change='handleEndDate'>
  
            </el-date-picker>
  
            <el-button type="primary" @click.stop='search' style='position:relative;top:1px'>搜索</el-button>
  
          </div>
  
        </div>
  
        <div v-for='(unit,i) in holeTotalList1'>
		        <div class="main_info c2">
		  
		          <div class="main_info tabletable">
		  
		            <div class="info_head2 info_head">
		  
		              <div class="info_head_items times">
		  
		                <span class="dates">{{startDate2}} ~ {{endDate2}}</span>
		  
		              </div>
		  
		              <div class="info_head_items should" :class='{"text-center":type==2}'>
		  
		                <span class="txt">应发总工资：</span>
		  
		                <!-- <span class="types">{{getCurrency()}}</span> -->
		  
		                <span class="moneys" v-if="unit.totalSalary">{{unit.totalSalary && returnCurrency(unit.totalSalary.summary)}} {{unit.totalSalary && unit.totalSalary.summary.c_GROSS_AMT  | keepTwoNum}}</span>
		                <span class="moneys" v-else>0.00</span>
		  
		              </div>
		  
		              <div class="info_head_items actual">
		  
		                <span class="txt">实发总工资：</span>
		  
		                <!-- <span class="types">{{getCurrency()}}</span> -->
		  
		                <span class="moneys" v-if="unit.totalSalary">{{unit.totalSalary && returnCurrency(unit.totalSalary.summary)}} {{unit.totalSalary && unit.totalSalary.summary.c_NET_PAY | keepTwoNum}}</span>
		                <span class="moneys" v-else>0.00</span>
		  
		              </div>
		  
		            </div>
		  
		            <div class='info_body'>
		  
		              <!--<p>
		  
		                <span>· 收入总合计</span>
		  
		                <span>· 扣减合计</span>
		  
		                <span>· 人工成本合计</span>
		  
		                <span>· 公司承担社保/MPF</span>
		  
		                <span>· 货币代码</span>
		  
		              </p>-->

	                  <div  class="main_info c1" >
				            

				                    <div class="info_ctn info_ctn1">
				            
				                      <section class="per-Month">
				            
				            
				            
				                        <div>
				            
				                          <div class="top">
				            
				                            <span class="items_name">收入总合计</span>
				            
				                            <span class="items-line"></span>

				                            <span class="items_money" v-if="unit.totalSalary">
				                              {{unit.totalSalary.summary.c_GROSS_AMT | keepTwoNum }}
				                            </span>				            
				                            <span class="items_money" v-else>
				                              0.00
				                            </span>
				                            
				                            
				                          </div>
				            
				                          <ul class="total_income_list" v-if="unit.totalSalary">
				           
				                            <li class="total_income_items" v-for='(m,i) in unit.totalSalary.income'>
				            
				                              <div class="total_tittle">{{m.name }}：</div>
				            
				                              <div class="total_num">
				                                {{m.value | keepTwoNum }}
				                                <el-tooltip
				                                   v-if='showTool(m.comment)'
				                                    :content='m.comment'
				                                    effect="light"
				                                   placement="top-start" 
				                                   popper-class='mySalary-tooltip'
				                                  >
				                                  <span class='help'>?</span>
				                                  
				                                </el-tooltip>
				                              </div>
				                            </li>
				            
				                          </ul>
				            
					                        <div>
					            
					                          <div class='top'>
					            
					                            <span class="items_name">公司承担总社保/MPF</span>
					            
					                            <span class="items-line"></span>

					                            <span class="items_money" v-if="unit.totalSalary">{{unit.totalSalary.summary.c_MPF | keepTwoNum}}</span>
					                            <span class="items_money" v-else>0.00</span>
					            
					                          </div>
					            
					                          <ul class="total_income_list" v-if="unit.totalSalary">
	
						            								<template v-for='c in unit.totalSalary.fund'>
								                            <li class="total_income_items"  v-if='c.name && c.name.indexOf("个人")<1'>
								            
								                              <div class="total_tittle">{{c.name}}：</div>
								            
								                              <div class="total_num" >
								                                {{c.value | keepTwoNum }}
								                                <el-tooltip
								                                v-if='showTool(c.comment)'
								                                    :content='c.comment'
								                                    effect="light"
								                                   placement="top-start"  
								                                  >
								                                  <span class='help'>?</span>
								                                </el-tooltip>
								                              </div>
								            
								                            </li>				            									
						            								</template>
																					
							
	
					            								<template v-for='(d,i) in unit.totalSalary.mpf'>
					            									
								                            <li class="total_income_items" v-if='d.name && d.name.indexOf("个人")<1'>
								            
								                              <div class="total_tittle">{{d.name}}：</div>
								            
								                              <div class="total_num">
								                                {{d.value | keepTwoNum }}
								                                <el-tooltip
								                                v-if='showTool(d.comment)'
								                                    :content='d.comment'
								                                    effect="light"
								                                   placement="top-start"  
								                                  >
								                                  <span class='help'>?</span>
								                                </el-tooltip>
								                              </div>
								            
								                            </li>				            									
					            									
					            								</template>
	
					            
					                          </ul>
					            
					                        </div>				            
					            				            
				            
				                        </div>
				            
				            
				            
				                        <div>
				            
					                          <div class="top">
					            
					                            <span class="items_name">扣减总合计</span>
					            
					                            <span class="items-line"></span>
					            
					                            <span class="items_money" v-if="unit.totalSalary">{{unit.totalSalary.summary.c_DDCT_AMT | keepTwoNum }}</span>
					                            <span class="items_money" v-else>0.00</span>
					            
					                          </div>
					            
					                          <ul class="total_income_list" v-if="unit.totalSalary && unit.totalSalary.deduction">
					            
					                            <li class="total_income_items" v-for='(b,i) in unit.totalSalary.deduction'>
					            
					                              <div class="total_tittle">{{b.name}}：</div>
					            
					                              <div class="total_num">
					                                {{b.value | keepTwoNum }}
					                                <el-tooltip
					                                   v-if='showTool(b.comment)'
					                                    :content='b.comment'
					                                    effect="light"
					                                   placement="top-start"  
					                                  >
					                                  <span class='help'>?</span>
					                                </el-tooltip>
					                              </div>
					            
					                            </li>
					            
					                          </ul>
					            
					            
<!-- 						            											            
						                        <div class="explain" v-if='unit.totalSalary.tax[0]'>
						            
						                          <ul class="explain_list">
						            
						                            <li class="explain_items">
						            
						                              <div class="items_val">应纳税收入：</div>
						            
						                              <div class="items_num">{{unit.totalSalary.tax[0].tax.C_AMT008 | keepTwoNum}}</div>
						            
						                            </li>
						            
						                            <li class="explain_items">
						            
						                              <div class="items_val">免税额：</div>
						            
						                              <div class="items_num">{{unit.totalSalary.tax[0].tax.C_AMT005 | keepTwoNum}}</div>
						            
						                            </li>
						            
						                            <li class="explain_items">
						            
						                              <div class="items_val">捐赠税：</div>
						            
						                              <div class="items_num">{{unit.totalSalary.tax[0].tax.C_AMT002 | keepTwoNum }}</div>
						            
						                            </li>
						            
						                            <li class="explain_items">
						            
						                              <div class="items_val">税率：</div>
						            
						                              <div class="items_num">{{unit.totalSalary.tax[0].tax.C_AMT007 || 0}}</div>
						            
						                            </li>
						            
						                            <li class="explain_items">
						            
						                              <div class="items_val">速算扣除法：</div>
						            
						                              <div class="items_num">{{unit.totalSalary.tax[0].tax.C_AMT006 | keepTwoNum}}</div>
						            
						                            </li>
						            
						                            <li class="explain_items">
						            
						                              <div class="items_val">个人所得税：</div>
						            
						                              <div class="items_num">{{unit.totalSalary.tax[0].tax.C_AMT004 | keepTwoNum }}</div>
						            
						                            </li>
						            
						                          </ul>
						            
						                          <div class="triangle_up" :class='getClass(unit.totalSalary)'></div>
						                         
						            
						                        </div>
						             -->
						    			            
					         
					                          <div class="top">
					            
					                            <span class="items_name">人工成本总合计</span>
					            
					                            <span class="items-line"></span>
					            
					                            <span class="items_money" v-if="unit.totalSalary && unit.totalSalary.summary">{{unit.totalSalary.summary.c_LABORCOST | keepTwoNum }}</span>
					                            <span class="items_money" v-else>0.00</span>
					            
					                          </div>
			            
				            
					            
					            
					                        <div>
					            				            
	
					                        </div>
				            

				            
				                        </div>
				                        
				                        

				            				            
				                      </section>
				            
				                    
				                    </div>
				            
				                  </div>
									                    							
		            										  
		  
		            </div>
		  
		          </div>
		  
		          <div class="info_ctn c2-info-ctn">
		  
		            <el-collapse v-model="c2active">
		  
		              <el-collapse-item  v-for='(k,i) in unit.salarys'>
		  
				                <template slot="title">
				  
				                    <span class="c2-items-money">应发工资： {{k.summary.c_GROSS_AMT | keepTwoNum }}</span>
				
				                    <span class="c2-items-money">实发工资： {{k.summary.c_NET_PAY | keepTwoNum }}</span>
				                    
				                    <span class="c2-items-money">{{k.summary.cal_PRD_ID}}</span>
				  
				  
				                </template>
				            
				                      <section class="per-Month">
				            
				            
				            
				                        <div>
				            
				                          <div class="top">
				            
				                            <span class="items_name">收入合计</span>
				            
				                            <span class="items-line"></span>
				            
				                            <span class="items_money">
				                              {{k.summary.c_GROSS_AMT | keepTwoNum }}
				                            </span>
				                            
				                            
				                          </div>
				            
				                          <ul class="total_income_list">
				          
				                            <li class="total_income_items" v-for='(m,i) in k.income'>
				            
				                              <div class="total_tittle">{{m.name }}：</div>
				            
				                              <div class="total_num">
				                                {{m.value | keepTwoNum }}
				                                <el-tooltip
				                                   v-if='showTool(m.comment)'
				                                    :content='m.comment'
				                                    effect="light"
				                                   placement="top-start" 
				                                   popper-class='mySalary-tooltip'
				                                  >
				                                  <span class='help'>?</span>
				                                  
				                                </el-tooltip>
				                              </div>
				                            </li>
				            
				                          </ul>
				            
					                        <div>
					            
					                          <div class='top'>
					            
					                            <span class="items_name">公司承担社保/MPF</span>
					            
					                            <span class="items-line" style="width:50%"></span>
					            
					                            <span class="items_money">{{k.summary.c_MPF }}</span>
					            
					                          </div>
					            
					                          <ul class="total_income_list">
	
						            								<template v-for='c in k.fund'>
								                            <li class="total_income_items"  v-if='c.name && c.name.indexOf("个人")<1'>
								            
								                              <div class="total_tittle">{{c.name}}：</div>
								            
								                              <div class="total_num" >
								                                {{c.value | keepTwoNum }}
								                                <el-tooltip
								                                v-if='showTool(c.comment)'
								                                    :content='c.comment'
								                                    effect="light"
								                                   placement="top-start"  
								                                  >
								                                  <span class='help'>?</span>
								                                </el-tooltip>
								                              </div>
								            
								                            </li>				            									
						            								</template>
																					
							
	
					            								<template v-for='(d,i) in k.mpf'>
					            									
								                            <li class="total_income_items" v-if='d.name && d.name.indexOf("个人")<1'>
								            
								                              <div class="total_tittle">{{d.name}}：</div>
								            
								                              <div class="total_num">
								                                {{d.value | keepTwoNum }}
								                                <el-tooltip
								                                v-if='showTool(d.comment)'
								                                    :content='d.comment'
								                                    effect="light"
								                                   placement="top-start"  
								                                  >
								                                  <span class='help'>?</span>
								                                </el-tooltip>
								                              </div>
								            
								                            </li>				            									
					            									
					            								</template>
	
					            
					                          </ul>
					            
					                        </div>				            
					            				            
				            
				                        </div>
				            
				            
				            
				                        <div>
				            
					                          <div class="top">
					            
					                            <span class="items_name">扣减合计</span>
					            
					                            <span class="items-line"></span>
					            
					                            <span class="items_money">{{k.summary.c_DDCT_AMT | keepTwoNum }}
					                              
					                            </span>
					            
					                          </div>
					            
					                          <ul class="total_income_list">
					            
					                            <li class="total_income_items" v-for='(b,i) in k.deduction'>
					            
					                              <div class="total_tittle">{{b.name}}：</div>
					            
					                              <div class="total_num">
					                                {{b.value | keepTwoNum }}
					                                <el-tooltip
					                                   v-if='showTool(b.comment)'
					                                    :content='b.comment'
					                                    effect="light"
					                                   placement="top-start"  
					                                  >
					                                  <span class='help'>?</span>
					                                </el-tooltip>
					                              </div>
					            
					                            </li>
					            
					                          </ul>
					            
					            
						            											            
						                        <div class="explain" v-if='k.tax[0]'>
						            
						                          <ul class="explain_list">
						            
						                            <li class="explain_items">
						            
						                              <div class="items_val">应纳税收入：</div>
						            
						                              <div class="items_num">{{k.tax[0].tax.C_AMT008 | keepTwoNum}}</div>
						            
						                            </li>
						            
						                            <li class="explain_items">
						            
						                              <div class="items_val">免税额：</div>
						            
						                              <div class="items_num">{{k.tax[0].tax.C_AMT005 | keepTwoNum}}</div>
						            
						                            </li>
						            
						                            <li class="explain_items">
						            
						                              <div class="items_val">捐赠税：</div>
						            
						                              <div class="items_num">{{k.tax[0].tax.C_AMT002 | keepTwoNum }}</div>
						            
						                            </li>
						            
						                            <li class="explain_items">
						            
						                              <div class="items_val">税率：</div>
						            
						                              <div class="items_num">{{k.tax[0].tax.C_AMT007 || 0}}</div>
						            
						                            </li>
						            
						                            <li class="explain_items">
						            
						                              <div class="items_val">速算扣除法：</div>
						            
						                              <div class="items_num">{{k.tax[0].tax.C_AMT006 | keepTwoNum}}</div>
						            
						                            </li>
						            
						                            <li class="explain_items">
						            
						                              <div class="items_val">个人所得税：</div>
						            
						                              <div class="items_num">{{k.tax[0].tax.C_AMT004 | keepTwoNum }}</div>
						            
						                            </li>
						            
						                          </ul>
						            
						                          <div class="triangle_up" :class='getClass(k)'></div>
						                         
						            
						                        </div>
						            
						    			            
					         
					                          <div class="top">
					            
					                            <span class="items_name">人工成本合计</span>
					            
					                            <span class="items-line"></span>
					            
					                            <span class="items_money">{{k.summary.c_LABORCOST | keepTwoNum }}</span>
					            
					                          </div>
			            
				            
					            
					            
					                        <div>
					            				            
	
					                        </div>
				            

				            
				                        </div>
				                        
				                        

				            				            
				                      </section>
				            
<!--				                    		
		                    <div>
		                      <div class="top">
		                        <span class="items_name">收入合计</span>
		                        <span class="items-line"></span>
		                        <span class="items_money">{{k.summary.c_GROSS_AMT | keepTwoNum }}</span>
		                      </div>
		                      <ul class="total_income_list">
		                        <li 
		                          v-if='k.income'
		                          v-for='(q,j) in k.income'
		                           class="total_income_items"
		                          >
		                          <div class="total_tittle">{{q.name}}：</div>
		                          <div class="total_num">{{q.value | keepTwoNum }}
		                            <el-tooltip
		                            v-if='showTool(q.comment)'
		                              :content='q.comment'
		                              effect="light"
		                             placement="top-start"  
		                            >
		                            <span class='help'>?</span>
		                          </el-tooltip>
		                          </div>
		                        </li>
		                      
		                      </ul>
		                    </div>
		                    <div>
		                      <div class="top">
		                        <span class="items_name">扣减合计</span>
		                        <span class="items-line"></span>
		                        <span class="items_money">{{k.summary.c_DDCT_AMT | keepTwoNum }}</span>
		                      </div>
		                      <ul class="total_income_list">
		                        <li class="total_income_items" v-for='(a,b) in k.deduction'>
		                          <div class="total_tittle">{{a.name}}：</div>
		                          <div class="total_num">{{a.value | keepTwoNum }}
		                            <el-tooltip
		                            v-if='showTool(a.comment)'
		                              :content='a.comment'
		                              effect="light"
		                             placement="top-start"  
		                            >
		                            <span class='help'>?</span>
		                      </el-tooltip>
		                          </div>
		                        </li>
		                      </ul>
		                      <div class="explain" v-if='k.tax'>
		                        <ul class="explain_list">
		                          <li class="explain_items total_income_items">
		                            <div class="total_tittle">应纳税收入：</div>
		                            <div class="total_num last" v-if="k.tax[0]">{{k.tax[0].tax.C_AMT008 | keepTwoNum }}</div>
		                            <div class="total_num last" v-else>0.00</div>
		                            
		                          </li>
		                          <li class="explain_items total_income_items">
		                            <div class="total_tittle">免税额：</div>
		                            <div class="total_num last" v-if="k.tax[0]">{{k.tax[0].tax.C_AMT005 | keepTwoNum }}</div>
		                            <div class="total_num last" v-else>0.00</div>
		                          </li>
		                          <li class="explain_items total_income_items">
		                            <div class="total_tittle">捐赠税</div>
		                            <div class="total_num" v-if="k.tax[0]">{{k.tax[0].tax.C_AMT002 | keepTwoNum }}</div>
		                            <div class="total_num last" v-else>0.00</div>
		                          </li>
		                          <li class="explain_items total_income_items">
		                            <div class="total_tittle">税率：</div>
		                            <div class="total_num" v-if="k.tax[0]">{{k.tax[0].tax.C_AMT007 }}</div>
		                            <div class="total_num last" v-else>0</div>
		                          </li>
		                          <li class="explain_items total_income_items">
		                            <div class="total_tittle" >速算扣除法：</div>
		                            <div class="total_num" v-if="k.tax[0]">{{k.tax[0].tax.C_AMT006 | keepTwoNum }}</div>
		                          	<div class="total_num last" v-else>0</div>
		                          </li>
		                          <li class="explain_items total_income_items">
		                            <div class="total_tittle">个人所得税：</div>
		                            <div class="total_num" v-if="k.tax[0]">{{k.tax[0].tax.C_AMT004 | keepTwoNum }}</div>
		                            <div class="total_num last" v-else>0.00</div>
		                          </li>
		                         </ul>
		                         <div class="triangle_up" :class='getClass2(k)'></div>
		                      </div>
		                                      
		
		                    </div>
		                    <div>
		                      <div class="top">
		                        <span class="items_name">公司承担社保/MPF</span>
		                        <span class="items-line" style="width:78%"></span>
		                        <span class="items_money">{{k.summary.c_MPF | keepTwoNum }}</span>
		                      </div>
		                      <ul class="total_income_list">
		                      	<template v-for='(q,j) in k.fund'>
		                      		
				                        <li class="total_income_items"
				                            
		                                v-if='q.name && q.name.indexOf("个人")<1'
				                            >
				
				                          <div class="total_tittle">{{q.name}}</div>
				                          <div class="total_num">
				                            {{q.value | keepTwoNum }}
				                            <el-tooltip
				                            v-if='showTool(q.comment)'
				                              :content='q.comment'
				                              effect="light"
				                             placement="top-start"  
				                            >
				                              <span class='help'>?</span>
				                            </el-tooltip>
				                          </div>
				                        </li>		                      		
		                      	</template>

		                    
            								<template v-for='(d,i) in k.mpf'>
            									
			                            <li class="total_income_items" v-if='d.name && d.name.indexOf("个人")<1'>
			            
			                              <div class="total_tittle">{{d.name}}：</div>
			            
			                              <div class="total_num">
			                                {{d.value | keepTwoNum }}
			                                <el-tooltip
			                                v-if='showTool(d.comment)'
			                                    :content='d.comment'
			                                    effect="light"
			                                   placement="top-start"  
			                                  >
			                                  <span class='help'>?</span>
			                                </el-tooltip>
			                              </div>
			            
			                            </li>				            									
            									
            								</template>

		                      </ul>
		                    </div>  
		                    <div>
		                      <div class="top">
		                        <span class="items_name">人工成本合计 </span>
		                        <span class="items-line"></span>
		                        <span class="items_money">{{k.summary.c_LABORCOST | keepTwoNum }}</span>
		                      </div>
		                    </div>
		-->
		                  
		              </el-collapse-item> 
		             
		            </el-collapse>
		          </div>
		        
		        </div>
		
		             	
		        	
        </div>
  
      </div>
      
    </section>
      
  </div>
 
  </template>
  
</template>

<script>
import Vue from "vue";

import {
  Collapse,
  CollapseItem,
  Tooltip,
  Select,
  Option,
  DatePicker,
  Message
} from "element-ui";

import header from "@/components/employee/header";

Vue.use(Collapse);

Vue.use(CollapseItem);

Vue.use(Tooltip);

Vue.use(Select);

Vue.use(Option);

Vue.use(DatePicker);

export default {
  name: "mySalary",

  data() {
    let that = this;

    return {

      options: [],

      selecteValue: "",

      rangeStart: "",

      rangeEnd: "",
      userName: localStorage.getItem("userName"),

      pickerOptions: {
//      disabledDate(time) {
//        let start = `${that.rangeStart}-01`;
//
//        let end = `${that.rangeEnd}-01`;
//
//        return (
//          time.getTime() < new Date(start).getTime() ||
//          time.getTime() > new Date(end).getTime()
//        );
//      }
      },

      isNoData: false,
      isNoData1: false,

      type: 1,

      startDate: "",

      endDate: "",

      startDate2: "",

      endDate2: "",
      
      startDateSave:'',
      
      endDate2Save:'',

      c2active: [],

      c2activeChild: [],

      res: [],
      
      resType1:[],

      people: null,
      
      holeTotalList:[],
      holeTotalList1:[{}],
    };
  },

  filters: {
    keepTwoNum: function(value) {
        if (!value) {
            return '0.00';
        }
        var value=Math.round(parseFloat(value)*100)/100;
        var xsd=value.toString().split(".");
        if(xsd.length==1){
            value=value.toString()+".00";
            return value;
        }
        if(xsd.length>1){
            if(xsd[1].length<2){
                value=value.toString()+"0";
            }
            return value;
        }
        
    }
  },

  methods: {
    showTool(val) {
      if (val) {
        if (!val.toString().trim()) {
          return false;
        } else {
          return true;
        }
      } else {
        return false;
      }
    },

    getClass(unit) {
      if (unit && unit.deduction.length) {
        let len = unit.deduction.length;
        let gongxinshui = unit.deduction.filter(
          ele => ele.name == "工薪税"
        ).length;
//      if (!gongxinshui) {
//        return "display-none";
//      } else if (len % 2 == 1) {
//        return "arrow-left";
//      } else if (len % 2 == 0) {
//        return "arrow-center";
//      } else {
//        return "";
//      }
        if (!gongxinshui) {
          return "display-none";
        } else {
          return "arrow-right";
        } 
        
      } else {
        return "display-none";
      }
    },

    getClass2(k) {
      if (k.deduction.length) {
        let len = k.deduction.length;
        let gongxinshui = k.deduction.filter(ele => ele.name == "工薪税").length;
//      if (!gongxinshui) {
//        return "display-none";
//      } else if (len % 3 == 1) {
//        return "arrow-left";
//      } else if (len % 3 == 2) {
//        return "arrow-center";
//      } else if (len % 3 == 0) {
//        return "arrow-right";
//      } else {
//        return "";
//      }
        
    		if (!gongxinshui) {
          return "display-none";
        } else {
          return "arrow-right";
        } 
        
        
      } else {
        return "display-none";
      }
    },

    getCurrency: function() {
      var result;

      result =
        this.res.salarys &&
        this.res.salarys.length > 0 &&
        this.res.salarys[0].summay
          ? this.res.salarys[0].summay.currency_CD
          : "CNY";

      return result;
    },

     returnCurrency:function(val){
         return val.currency_CD === 'CNY' ? '人民币' : (val.currency_CD === 'HKD'? '港元' : '未知')
     },


    handleStartDate(vals) {
      this.startDateSave = vals && `${vals.split("-")[0]}/${vals.split("-")[1]}`;
    },

    handleEndDate(val) {
      this.endDate2Save = val && `${val.split("-")[0]}/${val.split("-")[1]}`;
    },

    search() {
    	
    	this.startDate2 = this.startDateSave;
    	this.endDate2 = this.endDate2Save;
    	
      if (this.startDate2 && this.endDate2) {
				var result = [];
				[this.startDate,this.endDate].forEach((el,index)=>{
						if (typeof el == 'string') {
							result.push(new Date(el+'-01'));
						} else {
							result.push(el);
						}
				})

        if (result[0].getTime() <= result[1].getTime()) {
          this.c2active = [];
          let params = {
              beginDate: this.startDate2.replace(/\-/g,'/'),
              endDate: this.endDate2.replace(/\-/g,'/')
          };

          this.Axios.Post(this.URL.getEmployeeSalary.url, params).then(res => {
            
            var result = res.data.datas;
            

    				var currencyList = result.TotalSalarys;

            if (!currencyList || currencyList.length == 0 || (currencyList.length == 1 && currencyList[0]['salarys'].length === 0)) {
                this.holeTotalList1 = [{}];
                this.isNoData1=true;
                return;
            }

            for (var j=0,len=currencyList.length;j<len;j++) {
                this.isNoData1=false;
                
                if (currencyList[j].salarys.length) {
                    currencyList[j].salarys.forEach((ele, index, arr) => {
                        if (ele.deduction.length) {
                        for (let j = 0; j < ele.deduction.length; j++) {
                            if (ele.deduction[j].name == "工薪税") {
                                let del = ele.deduction.splice(j, 1);

                                ele.deduction.push(del[0]);
                                break;
                            }
                        }
                        }
                    });
                }
                if (currencyList[j].salarys.length === 1 && len === 1) {
                    this.isShowTotalCon = false;
                    if (currencyList[j].salarys[0].summary) {
                        var result = this.returnCurrency(currencyList[j].salarys[0].summary);
                        this.people = currencyList[j].salarys[0].summary.name;
                        currencyList[j].salaryType && (currencyList[j].salaryType.curreny = result)
                    }


                    // this.totalList = result.salarys || [{}];
                } else {
                    this.isShowTotalCon = true;
                    if (currencyList[j].salarys[0].summary) {
                        var result = this.returnCurrency(currencyList[j].salarys[0].summary);
                        this.people = currencyList[j].salarys[0].summary.name;
                        currencyList[j].salaryType && (currencyList[j].salaryType.curreny = result)
                    }

                    // this.holeTotalList = currencyList;
                    // this.totalSumList = result.TotalSalarys || {};
                    // this.totalList = result.salarys || [{}];
                }
                
                               

            }
            this.holeTotalList1 = currencyList;            
            

						
          });
        } else {
          Message({
            message: "请从低到高选择日期区间",

            type: "warning"
          });
        }
      } else {
        Message({
          message: "请选择日期",

          type: "warning"
        });
      }
    },

    handleSelect(val) {

    	
      let params = {
        beginDate: val,

        endDate: val
      };
			this.startDate2 = this.endDate2 = val;
			console.log(val,'this.startDate');
			this.startDateSave = this.endDate2Save =   val;
			val && (this.startDate =  this.endDate = val.replace(/\//g,'-'))

			console.log(this.endDate,'this.endDate');

      this.Axios.Post(this.URL.getEmployeeSalary.url, params).then(res => {
            var result = res.data.datas;
            var currencyList = result.TotalSalarys;
            if (!currencyList || currencyList.length == 0 || (currencyList.length == 1 && currencyList[0]['salarys'].length === 0)) {
                this.isNoData=true;
								// this.holeTotalList = currencyList;
								// this.holeTotalList1 = currencyList;
								this.holeTotalList1 = [{}];
                return;
            }

            for (var j=0,len=currencyList.length;j<len;j++) {
                this.isNoData=false;
                
                if (currencyList[j].salarys.length) {
                    currencyList[j].salarys.forEach((ele, index, arr) => {
                        if (ele.deduction.length) {
                        for (let j = 0; j < ele.deduction.length; j++) {
                            if (ele.deduction[j].name == "工薪税") {
                                let del = ele.deduction.splice(j, 1);

                                ele.deduction.push(del[0]);
                                break;
                            }
                        }
                        }
                    });
                }
                if (currencyList[j].salarys.length === 1 && len === 1) {
                    this.isShowTotalCon = false;
                    if (currencyList[j].salarys[0].summary) {
                        var result = this.returnCurrency(currencyList[j].salarys[0].summary);
                        this.people = currencyList[j].salarys[0].summary.name;
//                      currencyList[j].salaryType.curreny = result;
                    }


                    // this.totalList = result.salarys || [{}];
                } else {
                    this.isShowTotalCon = true;
                    if (currencyList[j].salarys[0].summary) {
                        var result = this.returnCurrency(currencyList[j].salarys[0].summary);
                        this.people = currencyList[j].salarys[0].summary.name;
//                      currencyList[j].salaryType.curreny = result;
                    }

                    // this.holeTotalList = currencyList;
                    // this.totalSumList = result.TotalSalarys || {};
                    // this.totalList = result.salarys || [{}];
                }
                
                               

            }
            this.holeTotalList = currencyList;
            this.holeTotalList1 = currencyList;
      });
    },

    initParamData(startDate,endDate){
        var params;
        if (!startDate || !endDate) {
              var  months = new Date().getMonth() + 1;

              months = months >= 10 ? months : "0" + months;

              var  years = new Date().getFullYear();
              
							this.startDate2 = this.endDate2 = `${years}/${months}`;
							this.startDateSave = this.endDate2Save =  this.startDate =  this.endDate = `${years}-${months}`;
							
							console.log(this.startDate,'this.startDate');
														
							for (var i=12;i>0;i--) {
								  if (months - 1 >= 0) {
								  		var newMonth = months - 0;
								  		newMonth = newMonth >= 10 ? newMonth : "0" + newMonth;
				              this.options.push({
				                value: `${years}/${newMonth}`
				              });		
				              months --;
								  } else {
								  		months = 12;
								  		years--;
				              this.options.push({
				                value: `${years}/${12}`
				              });		
				              months --;
								  }

							}

							

        } else {
              params = {
                  beginDate: startDate,
                  endDate:  endDate              
              }
        }

        return params;
    },

    initSalaryAjax(url,params){

        this.Axios.Post(url, params).then(res => {


				
            var result = res.data.datas;
            var currencyList = result.TotalSalarys;
            if (!currencyList || currencyList.length == 0 || (currencyList.length == 1 && currencyList[0]['salarys'].length === 0)) {
                this.isNoData=true;
                return;
            }

            for (var j=0,len=currencyList.length;j<len;j++) {
                this.isNoData=false;
                
                if (currencyList[j].salarys.length) {
                    currencyList[j].salarys.forEach((ele, index, arr) => {
                        if (ele.deduction.length) {
                        for (let j = 0; j < ele.deduction.length; j++) {
                            if (ele.deduction[j].name == "工薪税") {
                                let del = ele.deduction.splice(j, 1);

                                ele.deduction.push(del[0]);
                                break;
                            }
                        }
                        }
                    });
                }
                if (currencyList[j].salarys.length === 1 && len === 1) {
                    this.isShowTotalCon = false;
                    if (currencyList[j].salarys[0].summary) {
                        var result = this.returnCurrency(currencyList[j].salarys[0].summary);
                        this.people = currencyList[j].salarys[0].summary.name;
//                      currencyList[j].salaryType.curreny = result;
                    }


                    // this.totalList = result.salarys || [{}];
                } else {
                    this.isShowTotalCon = true;
                    if (currencyList[j].salarys[0].summary) {
                        var result = this.returnCurrency(currencyList[j].salarys[0].summary);
                        this.people = currencyList[j].salarys[0].summary.name;
//                      currencyList[j].salaryType.curreny = result;
                    }

                    // this.holeTotalList = currencyList;
                    // this.totalSumList = result.TotalSalarys || {};
                    // this.totalList = result.salarys || [{}];
                }
                
                               

            }
            this.holeTotalList = currencyList;
            this.holeTotalList1 = currencyList;
          
						return;
          var result = res.data.datas;
					
					
          if (
            (result.salarys && result.salarys.length == 0)
          ) {
              this.isNoData = true;
              return;
          } else {
        			this.isNoData = false;
        	}


          this.res = result;
          if (result.salarys.length && result.salarys[0].deduction.length) {
            result.salarys[0].deduction.forEach((ele, i, arr) => {
              if (ele.name == "工薪税") {
                arr.splice(i, 1);
                arr.push(ele);
              }
            });

            this.res.salarys = result.salarys;
          }
          
          this.people = result.salarys[0].summary.name;

        });

    }


  },

  components: {
    "v-header": header
  },

  created() {

    this.userName = localStorage.getItem("userName");

    this.initParamData();
    this.selecteValue = this.startDate2;
    var params = {
          beginDate: this.startDate2,
          endDate:  this.endDate2       	
    }

    this.initSalaryAjax(this.URL.getEmployeeSalary.url, params);



  }
};
</script>

<style lang='less'>

.help {
  display: inline-block;

  background-color: #89abc6;

  font-size: 14px;

  border-radius: 50%;

  height: 16px;

  line-height: 16px;

  width: 16px;

  margin-right: -15px;

  color: #fff;

  cursor: pointer;

  font-style: normal;

  font-weight: normal;

  text-align: center;
}
.el-collapse-item .el-collapse {
  border: 0;
}

.el-collapse-item__header {
  overflow: hidden;
}

.el-collapse-item__header .c2-items-money:nth-of-type(2) {
  float: right;

  margin-right: 130px;
}

.el-collapse-item__header .c2-items-money:last-of-type {
  float: left;
  margin-right: 340px;
}

.info_body {
  border: 1px solid #38f;

  border-top: 0px;
}

.info_body p {
  display: flex;

  justify-content: space-around;
}

/*.info_body span {
  flex: 3;

  border-right: 1px solid #f1f1f1;

  text-align: center;

  padding: 12px 0;

  color: #38f;
}*/

.el-date-editor.el-input {
  width: 120px !important;
}

.mySalary:before{
	content:' ';
	position: fixed;
	top:0;
	bottom:0;
	left:0;
	right:0;
	background-color: #fff;
	z-index:-1;
}

.mySalary .arrow-left {
  left: 20%;
}

.mySalary .arrow-center {
  left: 52%;
}

.mySalary .arrow-right {
  left: 84%;
}

.mySalary .display-none {
  display: none;
}

.mySalary .emp_head {
  height: 50px;

  background: #3c8dbc;

  line-height: 50px;

  text-align: center;

  color: #fff;
}

.mySalary .section {
  background: #fff;

  margin-top: 50px;
  clear: both;
  overflow:hidden;
}
.mySalary section.per-Month{
	overflow: hidden;
	clear:both;
}
.mySalary .per-Month>div{
		float:left;
		width:49.5%;
}

.mySalary .section:before {
  background: #fff;
  content:' ';
	top:0;
	bottom:0;
	left:0;
	right:0;
}


.mySalary .section .main_title {
  margin-top: 20px;

  text-align: center;

  height: 80px;

  line-height: 80px;

  font-size: 21px;
}

.mySalary .section .main_content {
  margin: 0 13% 40px;
}

.mySalary .section .main_guide {
  overflow: hidden;

  line-height: 35px;
}

.mySalary .section .main_guide .fa-caret-down {
  font-size: 25px;

  margin-left: 10px;

  position: relative;

  top: 5px;

  color: #999;
}

.mySalary .section .main_guide .guide_left {
  width: 50%;

  float: left;

  color: #38f;

  cursor: pointer;
}

.mySalary .section .main_guide .guide_right {
  width: 50%;

  float: right;

  text-align: right;

  color: #38f;

  cursor: pointer;
}

.mySalary .section .main_content .main_info {
  padding-top: 20px;

  border-radius: 4px;
}

.mySalary .section .main_content .main_info .info_head {
  height: 50px;

  line-height: 50px;

  background: #0268b3;

  padding: 0 20px;

  border-radius: 5px;

  color: #fff;

  font-size: 16px;

  overflow: hidden;
}

.mySalary .section .main_content .main_info .info_head2 {
  border-radius: 5px 5px 0 0;
}

.mySalary .section .info_head .info_head_items {
  width: 33.3%;

  float: left;
}

.mySalary .section .main_content .currencyCode {
  float: right;
}

.mySalary .section .main_content .info_head .actual {
  text-align: right;
}

.mySalary .section .main_content .info_head .should {
  text-align: right;
}

.mySalary .c1 .info_ctn {
  margin-top: 30px;
}

.mySalary .info_body>.main_info>.info_ctn {
  margin-top: 5px;
}

.info_ctn1 .el-collapse {
  border: 0;
}

.el-collapse {
  border: 1px solid #dfe6ec;

  border-radius: 5px !important;

  padding: 0 5px;
}

.mySalary .el-collapse-item {
  position: relative;
}

.mySalary .el-collapse-item .items_name {
  margin-right: 15px;

  font-weight: 900;
}

.mySalary .top {
  padding: 0 15px;

  overflow: hidden;
}

.mySalary .total_income_list {
  margin: 0 15px;
}

.mySalary .top .items_name {
  margin-right: 15px;

  font-weight: 900;
}

.mySalary .el-collapse-item .items_line {
  display: inline-block;

  width: 83%;

  height: 1px;

  background: #ccc;

  position: absolute;

  top: 24px;
}

.mySalary .el-collapse-item .items_money {
  display: inline-block;

  background: #fff;

  position: absolute;

  right: 30px;

  text-align: center;

  padding: 0 15px;

  font-weight: 900;

  color: #38f;

  height: 49px;
}

.mySalary .top .items_money {
  display: inline-block;

  background: #fff;

  text-align: center;

  padding: 0 15px;

  font-weight: 900;

  color: #38f;

  height: 49px;

  float: right;

  position: relative;

  z-index: 99;
}

.mySalary .top {
  position: relative;
  overflow: hidden;
}

.mySalary .top .items-line {
  width: 62%;

  height: 1px;

  background-color: #ccc;

  display: inline-block;

  position: absolute;

  top: 9.3px;
}

.mySalary .el-collapse-item__header {
  height: 50px;

  line-height: 50px;
}

.mySalary .el-collapse-item__wrap {
  background: #fff;
}

.mySalary .el-collapse-item .division_line {
  position: absolute;

  width: 90%;

  height: 2px;

  background: #ccc;

  top: 23px;
}

.mySalary .el-collapse-item .money_num {
  position: absolute;

  right: 20px;

  top: 10px;
}

.mySalary .el-collapse-item__header__arrow {
  position: absolute;

  right: 0;

  top: 18px;
}

.mySalary .info_ctn .total_income_list {
  margin-bottom: 25px;

  overflow: hidden;
}

.mySalary .info_ctn .total_income_list .total_income_items {
  height: 40px;

  line-height: 40px;

  float: left;
}

// .mySalary .info_ctn .total_income_list .left {
//   width: 33%;
// }

.mySalary .total_income_list .payroll_tax {
  position: relative;
}

.mySalary .total_income_list .query_payroll_tax {
  color: #38f;

  position: absolute;

  left: 60px;

  top: 0;

  width: 200px;
}

.mySalary .total_income_list .query_payroll_tax .fa-caret-down {
  margin-right: 10px;

  font-size: 25px;

  position: relative;

  top: 5px;
}

// .mySalary .info_ctn .total_income_list .center {
//   width: 33%;
// }

.mySalary .info_ctn .total_income_list li,
.total_income_items {
  width: 99%;
}

// .mySalary .info_ctn .total_income_list li:nth-of-type(3n),
// .total_income_items:nth-of-type(3n) {
//   width: 30%;
// }
.total_tittle {
  word-break: keep-all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mySalary .info_ctn .question_tip {
  text-align: center;
}

// .mySalary .info_ctn .total_income_list .right {
//   width: 30%;
// }

.mySalary .info_ctn .total_income_items .total_tittle {
  float: left;

  width: 58%;

  padding-left: 5px;

  color: #999;
}

.mySalary .c2 .info_ctn .total_income_items .total_num {
  float: right;

  text-align: center;
	
  margin-right: 9%;
	
  font-weight: 900;
}

.mySalary .c1 .info_ctn .total_income_items .total_num {
  float: right;

  text-align: center;
	
	margin-right:10px;
	
  font-weight: 900;
}



.mySalary .info_ctn .total_num .fa-question-circle {
  color: #89abc6;

  margin-left: 5px;
}

.mySalary .info_ctn .total_income_items .last {
  text-align: right;

  padding-right: 10px;
}

.mySalary .info_ctn .explain {
  background: #f8f8f8;

  padding: 10px 20px;

  position: relative;

  border-radius: 4px;

  margin-bottom: 25px;
}

.text-center {
  text-align: center !important;
}

.mySalary .info_ctn .explain .explain_list {
  overflow: hidden;
}

.mySalary .info_ctn .explain .explain_list .explain_items {
  float: left;

  width: 49.5%;

  height: 40px;

  line-height: 40px;
}

.mySalary .explain .explain_list .items_val {
  float: left;

  width: 50%;

  text-align: left;

  padding-left: 20px;
}

.mySalary .explain .explain_list .items_num {
  float: left;

  width: 30%;

  text-align: right;
}

.mySalary .explain .triangle_up {
  position: absolute;

  top: -14px;

  width: 0;

  height: 0;

  border-left: 20px solid transparent;

  border-right: 20px solid transparent;

  border-bottom: 20px solid #f8f8f8;
}

.mySalary div.imgBox {
  background-color: rgba(0, 0, 0, 0.01);
  text-align: center;
  border-radius: 50%;
  padding: 60px;
  width: 320px;
  height: 320px;
  line-height: 320px;
  margin: 0 auto;
  margin-top: 160px;
}
.mySalary div.imgBox img {
  display: inline-block;
  height: 200px;
  width: 200px;
}
.mySalary p.data {
  margin-top: 25px;
  text-align: center;
}
</style>
